<template>
  <div>
    <!-- 分页 -->
       <el-footer>
           <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="PageSize"
            layout="total, prev, pager, next"
            :total="totalnum"
           >
           </el-pagination>
       </el-footer>
  </div>
</template>

<script>
//这就是一个组件，新建组件的基础格式就这样就可以了，在这个里面添加东西
export default {
  name: '',
  props: {
    totalnum:{
      default:()=>0,
      type:Number
    }
  },
  data(){
    return {
            currentPage: 1,
            PageSize: 3,
    }
  },
  methods:{
      handleSizeChange(val) {
          this.PageSize=val
      },
      handleCurrentChange(val) {
        // 默认页数是1，只有当点击分页为2、3...时，才会触发调用此函数，以此触发this.$emit
        // 不点击更改页数就不抛默认页数，所以需要在子组件给出一页的默认多少条数据
          this.currentPage = val;
          // 子组件$emit抛出两个值，父组件接收函数的参数为两个
          this.$emit('newPage',val,this.PageSize);
          console.log(`当前 ${val} 页`)
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>